<template>
  <AddSmall ref="add_small_in_PMSmall_ref"/>

<!-- todo 根据条件从后端返回数据 -->
<el-form ref="small_query_form" :label-position=" 'right' " label-width="80px"
				 :inline="true" :model="fuzzy_search" style="width: 100%">

	<el-form-item label="大类搜索">
		<FuzzySearchBigVer2 @DataUse="big_auto_complete_in_small($event as any)"
										ref="big1_clear_ref"
										:disable="false"
										@DataClear="big1_clear"/>
	</el-form-item>

	<el-form-item label="小类搜索">
	<FuzzySearchSmallVer2 @DataUse="small_auto_complete_in_small($event as any)"
										ref="small1_clear_ref"
										:disable="false"
										@DataClear="small1_clear"/>
	</el-form-item>

	<el-form-item prop="use" label="启用状态">
		<el-radio-group v-model="fuzzy_search.use">
			<el-radio-button value="启用">启用</el-radio-button>
			<el-radio-button value="未启用">未启用</el-radio-button>
			<el-radio-button value="全部">全部</el-radio-button>
		</el-radio-group>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="return_small_list()">搜索</el-button>
		<el-button @click=" handleSmallAdd() ">添加小类</el-button>
		<el-button @click=" select_small_table_col() ">选择列</el-button>
	</el-form-item>
	<!-- 引入模糊搜索组件 -->


</el-form>

<el-form :label-position=" 'right' " label-width="80px" :inline="true">
	<el-form-item label="日期">
		<el-date-picker
			v-model="small_table_date_and_num_check.date_start"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<el-form-item label="数量">
		<el-input-number v-model="small_table_date_and_num_check.num" :step="5" step-strictly/>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="small_table_date_check()">日期检查</el-button>
		<el-button type="primary" @click="small_table_num_check()">数量检查</el-button>
		<el-button @click=" export_small_table() ">导出表格</el-button>
	</el-form-item>
</el-form>

<!-- todo 数据表显示区域 -->
<!-- 这建立在id唯一的情况下 -->
<el-table :data="small_list" style="width: 100%" row-key="id" id="small_table_id" ref="small_table_ref">
	<!--选择框-->
	<el-table-column label="大类id" prop="big" v-if=" small_table_head_optional.big "/>
	<el-table-column label="小类id" prop="id" v-if=" small_table_head_optional.id "/>
	<el-table-column label="编号" prop="no" v-if="small_table_head_optional.no"/>
	<el-table-column label="大类名称" prop="big_name" v-if="small_table_head_optional.big_name"/>
	<el-table-column label="小类名称" prop="small_name" v-if="small_table_head_optional.small_name"/>
	<el-table-column label="型号" prop="model" v-if="small_table_head_optional.model"/>
	<el-table-column label="单位" prop="units" v-if="small_table_head_optional.units"/>
	<el-table-column label="加权单价" prop="unit_price" v-if="small_table_head_optional.unit_price"/>
	<el-table-column label="实际单价" prop="real_unit_price" v-if="small_table_head_optional.real_unit_price"/>
	<el-table-column label="数量" prop="number" v-if="small_table_head_optional.number"/>
	<el-table-column label="总价" prop="total" v-if="small_table_head_optional.total"/>
	<el-table-column label="是否启用" v-if="small_table_head_optional.use">
		<template #default="scope">
			<!--      <span>{{scope.row._use ? '是':'否'}}</span>-->
			<el-switch v-model="scope.row.use" size="small" @click="switch_small_change(scope.row)"/>
		</template>
	</el-table-column>
	<el-table-column label="位置" prop="place" v-if="small_table_head_optional.place"/>
	<el-table-column label="最后修改日期" prop="last_use_date_str" v-if="small_table_head_optional.last_use_date_str"/>
	<el-table-column label="添加日期" prop="create_date_str" v-if="small_table_head_optional.create_date_str"/>

	<el-table-column align="right" width="140px" v-if="small_table_head_optional.button">
		<template #header>
		</template>

		<template #default="scope">
			<el-button size="small" @click="handleSmallEdit(scope.row)">修改</el-button>
			<el-button size="small" type="danger" @click="handleSmallDelete(scope.$index, scope.row)">删除</el-button>
		</template>
	</el-table-column>
</el-table>

<!-- 分页 -->
<el-pagination
	v-model:current-page="currentPage"
	v-model:page-size="pageSize"
	:page-sizes="[100, 200, 500]"
	:small="small"
	:disabled="disabled"
	:background="background"
	layout="total, sizes, prev, pager, next, jumper"
	:total=" total "
/>

<!--修改 小类-->
<el-dialog
	v-model="update_small_visible"
	:title=" '修改小类' "
	:close-on-click-modal='false'
	:close-on-press-escape='false'
	:show-close='false'
>
	<el-form :model="update_small_variable" :rules="update_small_rules" ref="update_small_ref"
					 :label-position=" 'right' " label-width="90px">

		<el-form-item prop="big_name" label="所属大类">
			<FuzzySearchBigVer2 @DataUse="big_auto_complete_in_small_update_dialog($event as any)"
											ref="big3_clear_ref"
											:disable="false"
											:content="update_small_variable.big_name"
											@DataClear="big3_clear"/>
		</el-form-item>

		<el-form-item prop="no" label="小类编号">
			<el-input v-model="update_small_variable.no" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="small_name" label="小类名称">
			<el-input v-model="update_small_variable.small_name" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="models" label="型号">
			<el-input v-model="update_small_variable.models" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="units" label="单位">
			<el-input v-model="update_small_variable.units" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="place" label="放置位置">
			<el-input v-model="update_small_variable.place" autocomplete="off"/>
		</el-form-item>

	</el-form>
	<template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_update_small()">取消</el-button>
				<el-button type="primary" @click="update_small()">确定</el-button>
      </span>
	</template>
</el-dialog>

<!-- 选择显示表格的列 -->
<el-dialog
	v-model="small_table_head_show_visible"
	title="表头选项"
	:close-on-click-modal='false'
	:close-on-press-escape='false'
	:show-close='false'
>
	<el-checkbox v-model="small_table_head_optional.big" label="大类id(默认不显示)"/>
	<el-checkbox v-model="small_table_head_optional.id" label="小类id(默认不显示)"/>
	<el-checkbox v-model="small_table_head_optional.no" label="编号"/>
	<el-checkbox v-model="small_table_head_optional.big_name" label="大类名称"/>
	<el-checkbox v-model="small_table_head_optional.small_name" label="小类名称"/>
	<el-checkbox v-model="small_table_head_optional.model" label="型号"/>
	<el-checkbox v-model="small_table_head_optional.units" label="单位"/>
	<el-checkbox v-model="small_table_head_optional.unit_price" label="加权单价"/>
	<el-checkbox v-model="small_table_head_optional.real_unit_price" label="实际单价"/>
	<el-checkbox v-model="small_table_head_optional.number" label="数量"/>
	<el-checkbox v-model="small_table_head_optional.total" label="总价"/>
	<el-checkbox v-model="small_table_head_optional.use" label="启用和关闭"/>
	<el-checkbox v-model="small_table_head_optional.place" label="放置位置"/>
	<el-checkbox v-model="small_table_head_optional.last_use_date_str" label="最后出入库日期"/>
	<el-checkbox v-model="small_table_head_optional.create_date_str" label="创建日期"/>
	<el-checkbox v-model="small_table_head_optional.button" label="按钮"/>
	<template #footer>
      <span class="dialog-footer">
        <el-button @click="select_small_table_col_confirm()">确定</el-button>
      </span>
	</template>
</el-dialog>


</template>

<script lang="ts">
export default {
	name: "PartsManagement1"
}
</script>
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {
	BigOrSmallStopUseResponse,
	SmallInfo,
	SmallTableCRUDResponse
} from "@/api/first/PartsManagement/type.ts";
import {reqBigStopUse, reqSmallList} from "@/api/first/PartsManagement";
import {ElMessage, ElMessageBox} from "element-plus";
import type {BigAutoCompletion} from "@/components/first/FuzzySearchBigVer2.vue";
import type {SmallAutoCompletion} from "@/components/first/FuzzySearchSmallVer2.vue";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
import {LocationCheckResponse} from "@/api/first/PartsManagement/type.ts";
import {reqLocationCheck} from "@/api/first/PartsManagement/index.ts";
import AddSmall from "@/components/first/AddSmall.vue";
import FuzzySearchBigVer2 from "@/components/first/FuzzySearchBigVer2.vue";
import FuzzySearchSmallVer2 from "@/components/first/FuzzySearchSmallVer2.vue";



// 跳转
const jump_to_small = (val: number) => {
	fuzzy_search.mode = 'big'
	fuzzy_search.big_id  = val
	fuzzy_search.use = '启用'
	read_small()
}
defineExpose({jump_to_small});





const big1_clear_ref = ref()  // 返回页面内容搜索 大类ref
const small1_clear_ref = ref()  // 返回页面内容搜索 小类ref

const big3_clear_ref = ref()  // 修改小类ref



//---------------------------------------------------------------
// 选择表格显示哪些列
//---------------------------------------------------------------
const small_table_head_optional = reactive({
	big: false,
	id: false,
	no: true,
	big_name: false,
	small_name: true,
	model: true,
	unit_price: true,
	real_unit_price: false,
	number: true,
	total: true,
	units: true,
	use: true,
	place: false,
	last_use_date_str: true,
	create_date_str: false,
	button: true,
})
const small_table_head_show_visible = ref<boolean>() // 决定选择列的框是否显示
// 选择表格可以导出的列
const select_small_table_col = () => {
	small_table_head_show_visible.value = true
}
const select_small_table_col_confirm = () => {
	small_table_head_show_visible.value = false
}
// 导出小类表
const export_small_table = () => {
	make_excel_file('小类表', 'small_table_id')
}


//---------------------------------------------------------------
// 数据返回
//---------------------------------------------------------------

// 在删除大类搜索框的内容之后
const big1_clear = () => {
	fuzzy_search.big_id = ''
}
const small1_clear = () => {
	fuzzy_search.small_id = ''
}



const small_table_date_and_num_check = reactive<{
	date_start: string,
	num: number | null,
}
>({
	date_start: '',
	num: 10,
})
const small_table_date_check = async () => {
	if(small_table_date_and_num_check.date_start === ''){
		ElMessage.warning('时间不得为空')
		return
	}
	const result: LocationCheckResponse = await reqLocationCheck({
		mode: '时间',
		big_id: fuzzy_search.big_id as number,
		date_start: small_table_date_and_num_check.date_start as string,
		start: (currentPage.value - 1) * pageSize.value,
		stop: currentPage.value * pageSize.value,
	})
	total.value = result.data.total as number
	small_list.value = result.data.data
	ElMessage.success(result.success?.message)
}

const small_table_num_check = async() => {
	if(small_table_date_and_num_check.num === null){
		ElMessage.warning('数量不得为空')
		return
	}
	const result: LocationCheckResponse = await reqLocationCheck({
		mode: '数量',
		big_id: fuzzy_search.big_id,
		num: small_table_date_and_num_check.num,
		start: (currentPage.value - 1) * pageSize.value,
		stop: currentPage.value * pageSize.value,
	})
	total.value = result.data.total as number
	small_list.value = result.data.data
	ElMessage.success(result.success?.message)
}
// 模糊搜索处理

const big_auto_complete_in_small = (cmy: BigAutoCompletion) => {
	fuzzy_search.big_id = cmy.big_id as number
	fuzzy_search.mode = 'big'
	small1_clear_ref.value?.clear_input()
}
const small_auto_complete_in_small = (cmy: SmallAutoCompletion) => {
	fuzzy_search.mode = 'small'
	fuzzy_search.small_id = cmy.small_id as number
	big1_clear_ref.value?.clear_input()
}

// 返回小类数据
const return_small_list = () => {
	if (fuzzy_search.big_id === '' && fuzzy_search.small_id === '') {
		ElMessage.warning('请输入小类返回的条件')
		return
	}
	// 根据大类id返回其下所有小类数据
	read_small()
}

// 数据返回函数
const read_small = () => {
	let temp_id
	if(fuzzy_search.mode === 'big'){
		temp_id = fuzzy_search.big_id
	}else{
		temp_id = fuzzy_search.small_id
	}
	reqSmallList({
		mode: 'read',
		read: {
			mode: fuzzy_search.mode,
			id: temp_id as number,
			use: fuzzy_search.use,
			start: (currentPage.value - 1) * pageSize.value,
			stop: currentPage.value * pageSize.value,
		}
	}).then((res: SmallTableCRUDResponse) => {
		small_list.value = res.read?.small_list as SmallInfo[]
		total.value = res.read?.total as number
		ElMessage.success(res.success?.message)
	})
}

// TODO: 分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录

const total = ref<number>(0) // 总条数

watch([currentPage, pageSize], () => {
	// 无需对表单进行验证，因为要回传的东西不可能有错
	read_small()
})

// 小类数据变量
const small_list = ref<SmallInfo[]>([])
// 设定返回小类条件的ref
const small_query_form = ref<FormInstance>()
// 返回小类数据
const fuzzy_search = reactive<{
	big_name: string
	big_prefix: string
	small_name: string
	small_no: string
	mode: 'big' | 'small'
	big_id: number | ''
	small_id: number | ''
	use: '启用' | '未启用' | '全部'
}>({
	big_name: '',
	big_prefix: '',
	small_name: '',
	small_no: '',
	mode: 'big',
	big_id: '',
	small_id: '',
	use: '启用',
})

// 删除小类
const handleSmallDelete = async (index: number, row: SmallInfo) => {
	await ElMessageBox.confirm(
		`您确认删除名称为 ${row.small_name} 的小类？`,
		'警告',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	// 请求删除
	const res: SmallTableCRUDResponse = await reqSmallList({
		mode: 'delete',
		delete: {
			small_id: row.id
		}
	})
	//直接将该条记录移除
	small_list.value.splice(index, 1)
	// 记得分页中的total需要减去1
	total.value = total.value - 1
	ElMessage.success({message: res.success?.message})
}

// TODO:更改小类的使用情况
const switch_small_change = async (row: SmallInfo) => {
	const result: BigOrSmallStopUseResponse = await reqBigStopUse({
		mode: 'small',
		small: {
			id: row.id,
			use: row.use
		}
	}).catch(() => {
		row.use = !row.use
	})
	ElMessage.success(result.success?.message)
}

//-----------------------------
// 添加小类
//-----------------------------
const add_small_in_PMSmall_ref = ref()
const handleSmallAdd = () => {
  add_small_in_PMSmall_ref.value?.open()
}


//-----------------------------
// 修改小类
//-----------------------------
const big3_clear = () => {
	update_small_variable.big_id = ''
	update_small_variable.big_name = ''
}
// 打开修改小类框
const update_small_ref = ref<FormInstance>()
// 增删改查所需携带的变量
const update_small_variable = reactive<{
	big_name: string
	big_id: number | ''
	no: string
	small_name: string
	small_id: number | ''
	models: string
	units: string
	place: string
}>({
	big_name: '',
	big_id: '',
	small_name: '',
	small_id: '',
	no: '',
	models: '',
	units: '',
	place: '',
})
const update_small_visible = ref(false) // 决定添加和修改框是否显示
const update_small_rules = reactive<FormRules>({
	big_name: [{
		type: 'string',
		message: '请选择所属大类',
		required: true
	}],
	no: [{
		type: 'string',
		message: '小类编号需要满足要求',
		max: 20,
		min: 1,
		required: true,
	}],
	small_name: [{
		type: 'string',
		message: '小类名称需要小于等于100个字符',
		max: 100,
		min: 1,
		required: true,
	}],
	models: [{
		type: 'string',
		message: '型号需要小于等于100个字符',
		max: 100,
		min: 1
	}],
	units: [{
		type: 'string',
		message: '单位需要小于等于5个字符',
		max: 5,
		min: 1,
		required: true,
	}],
	place: [{
		type: 'string',
		message: '摆放位置需要小于等于10个字符',
		max: 10,
		min: 1
	}]
})

// 关闭修改小类框
const cancel_update_small = () => {
	update_small_visible.value = false
}

// 打开修改小类框
const handleSmallEdit = (row: SmallInfo) => {
	update_small_visible.value = true
	update_small_variable.big_id = row.big
	update_small_variable.big_name = row.big_name
	update_small_variable.small_id = row.id
	update_small_variable.small_name = row.small_name
	update_small_variable.models = row.model
	update_small_variable.units = row.units
	update_small_variable.place = row.place
	update_small_variable.no = row.no
}

// 在添加小类框中选择其所属大类
const big_auto_complete_in_small_update_dialog = (cmy: BigAutoCompletion) => {
	update_small_variable.big_name = cmy.big_name
	update_small_variable.big_id = cmy.big_id
}

// 修改小类
const update_small = async () => {
	await update_small_ref.value?.validate()
	const res: SmallTableCRUDResponse = await reqSmallList({
		mode: "update",
		update: {
			small_name: update_small_variable.small_name,
			small_id: update_small_variable.small_id as number,
			no: update_small_variable.no,
			models: update_small_variable.models,
			units: update_small_variable.units,
			place: update_small_variable.place,
			big_id: update_small_variable.big_id as number,
		}
	})
	big3_clear_ref.value?.clear_input()
	update_small_visible.value = false
	read_small()
	ElMessage.success(res.success?.message)
}


</script>
<style scoped>

</style>